<template>
  <div class="BookShelf" :style="{'background-image':'url('+img+')'}">
    <!--<div class="BookShelf">-->
    <div class="imgs">
      <img :src="img" alt="">
      <div class="tests">
        <div class="nickname">
          <img :src="items.vip_info.avatar" alt="">
        </div>
        <div class="username"><span>{{items.vip_info.nickname}}</span></div>
        <div class="illst">
          <p class="nums">
            <span>我正参与「十分读书」累计阅读{{items.vip_info.read_days}}天，每天10分钟，60天读完60本高分好书！</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Json from '../../Json/CardBg'
  import {Toast} from 'mint-ui'

  export default {
    name: 'index',
    data: function () {
      return {
        Math: Math.floor(Math.random() * Json.length),
        // img: require('../../assets/img/CardBg/6copy.jpg'),
        img:'',
        items: {
          qr_code: '',
          vip_info: {}
        },
        BookShelfParams:sessionStorage.getItem('BookShelfParams')?JSON.parse(sessionStorage.getItem('BookShelfParams')):{},
        publicParams:sessionStorage.getItem('Ten_Vip_share_data') ? JSON.parse(sessionStorage.getItem('Ten_Vip_share_data')).data.qing_data:{}
      }
    },
    mounted: function () {
      // this.img = Json[this.Math].bg
      this.ShareCard(this.BookShelfParams)
    },
    methods: {
      ShareCard: function (data) {
        this.$axios.achievement_card(data).then(res => {
          var _this =  this
          if(res.data.qing_data.test_body){
            this.items = res.data.qing_data
            this.items.vip_info.read_words = this.items.vip_info.read_words >= 1000 ? (this.items.vip_info.read_words / 1000).toFixed(1) + '千' : this.items.vip_info.read_words + ''
            var arrimg = res.data.qing_data.test_body.attach_body.split(',')
            this.img = arrimg[Math.floor(Math.random()*arrimg.length)]
            // this.init()
            // this.canvasinit()
            // res.data.qing_data.next_share_info.share_id = this.$route.query.share_id || data.share_id
            // res.data.qing_data.next_share_info.share_token = this.$route.query.share_token ||data.share_token
            this.Share(this.publicParams)
          }else{
            _this.go('BookShelf',_this.BookShelfParams)
          }

        })
      },
      Share: function (str) {
        var _this = this
        var obj = {}
        var data = {
          title: str.title,
          desc: str.desc,
          link: str.link,
          imgUrl: str.img
        }
        obj.share_id = str.share_id
        obj.share_token = str.share_token
        this.$wx.ShareTimeline(data, res => {
          obj.share_mode = res.share_mode
          obj.share_type = 21
          _this.share_done(obj)
        })
        this.$wx.ShareAppMessage(data, res => {
          obj.share_mode = res.share_mode
          obj.share_type = 21
          _this.share_done(obj)
        })
      },
      share_done: function (obj) {
        this.$axios.share_done(obj).then(res => {
          this.shares = false
          if (res.data.qing_code !== 100) {
            Toast({
              message: '打卡失败',
              iconClass: 'iconfont icon-bangdingshibai',
              duration: 5000
            })
          } else {
            Toast({
              message: '分享成功',
              iconClass: 'iconfont icon-tianjiachenggong',
              duration: 3000
            })
          }
        })
      },
      go: function (name, obj) {
        this.$router.push({
          name: name,
          query: obj || {}
        })
      },

    },
    components: {}
  }
</script>

<style scoped>
  @import "../../assets/css/views/BookShelfNew/index.css";

  img {
    width: 100%;
  }
</style>
